<template>
  <div class="book-shelf">
    <div class="toolbar" v-if="showToolbar">
      <slot name="toolbar"></slot>
    </div>

    <div v-if="loading" class="skeleton-grid">
      <div v-for="n in 8" :key="n" class="skeleton-item"></div>
    </div>

    <el-empty v-else-if="!books.length && !error" description="暂无典籍数据" />

    <div v-else class="grid">
      <BookCard
        v-for="b in books"
        :key="b.id"
        :book="b"
        @select="onSelect(b)"
      />
    </div>

    <el-alert
      v-if="error"
      :title="error"
      type="error"
      show-icon
      class="mt-16"
    />
  </div>
</template>

<script setup>
import BookCard from './BookCard.vue'

const props = defineProps({
  books: { type: Array, default: () => [] },
  loading: { type: Boolean, default: false },
  error: { type: String, default: '' },
  showToolbar: { type: Boolean, default: true }
})
const emit = defineEmits(['select'])

function onSelect(book) { emit('select', book) }
</script>

<style scoped>
.book-shelf { width:100%; }
.toolbar { margin-bottom: 16px; }
.grid { display:grid; gap:16px; grid-template-columns: repeat(auto-fill,minmax(160px,1fr)); }

/* Skeleton */
.skeleton-grid { display:grid; gap:16px; grid-template-columns: repeat(auto-fill,minmax(160px,1fr)); }
.skeleton-item { height:260px; background:linear-gradient(120deg,#f1f4f8,#e3e8ef,#f1f4f8); background-size:200% 100%; animation: shimmer 1.2s infinite; border-radius:8px; }
@keyframes shimmer { 0% {background-position:0 0;} 100% {background-position:-200% 0;} }
.mt-16 { margin-top:16px; }
</style>
